<template>
	<view class="charts-box">
		<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" tooltipFormat="ypjcPie" />
	</view>
</template>

<script>
	import rechargeInfo from "../../api/campus/index.js"

	export default {


		data() {
			return {
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE"], // 饼图的颜色
					padding: [15, 30, 0, 5], // 设置内边距
					legend: {
						position: "top", // 图例的位置
						float: "left", // 图例的浮动位置
					},
					extra: {
						pie: {
							radius: [40, 70], // 设置饼图的半径
							labelLine: {
								show: false, // 隐藏连接线
							},
							label: {
								show: true,
								position: 'center', // 标签显示在中心
								fontSize: 18,
								fontWeight: 'bold',
							}
						},
					},
				},
			};
		},
		mounted() {
			console.log(2222)
			this.getServerData(); // 获取图表数据
		},
		methods: {

			async getServerData() {
				try {

					// 从服务器获取数据
					let response = await rechargeInfo.getOwnRechargeInfo();
					console.log(response)

					let res = {
						series: response.data.map(item => ({
							name: item.name, // 将 `name` 映射为 `name`
							data: item.data // 将 `data` 映射为 `data`
						}))
					};

					this.chartData = JSON.parse(JSON.stringify(res)); // 更新图表数据

				} catch (error) {
					console.error("Error:", error);
				}
			},



		},
	};
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 400px;
		margin: 20px 0;
		/* 可以调整为合适的高度 */
	}
</style>